<template>
  <div class="login-container">
    <h1 class="login-title">球员信息管理系统</h1>
    <div>
      <form @submit.prevent="handleSubmit" class="login-form">
        <div class="input-group">
          <label for="username">Username:</label>
          <input type="text" id="username" v-model="username" required>
        </div>
        <div class="input-group">
          <label for="password">Password:</label>
          <input type="password" id="password" v-model="password" required>
        </div>
        <button type="submit" class="login-button">Login</button>
      </form>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      isError: false,
    };
  },
  methods: {
    async handleSubmit() {
      // 这里模拟异步登录请求
      this.isError = false; // 重置错误状态
      try {
        const response = await this.login(this.username, this.password);
        if (response.ok) {
          // 登录成功，跳转到主页
          this.$router.push('/home/OrderManagement');
        } else {
          // 登录失败，提示错误
          this.isError = true; // 设置错误状态
          alert('Login failed');
        }
      } catch (error) {
        console.error('Error during login:', error);
        this.isError = true; // 设置错误状态
        alert('An error occurred during login.');
      }
    },

    // 假设的登录API调用
    async login(username, password) {
      // 这里应该发送请求到后端API
      // 模拟请求，实际开发中请替换为真实的API请求
      return new Promise((resolve) => {
        setTimeout(() => {
          // 假设用户名为'admin'，密码为'123456'
          if (username === 'admin' && password === '123456') {
            resolve({ ok: true });
          } else {
            resolve({ ok: false });
          }
        }, 1000);
      });
    }
  },
};
</script>

<style scoped>
.login-container {
  margin: 0 auto;
  width: 50%;
  min-width: 500px;
  height: 100vh;
  background-color: #f5f5f5;
  /* 浅灰色背景 */
  padding-top: 100px;
}

.login-title {
  color: #333;
  /* 深灰色标题 */
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
  display: inline-block;
}

.login-form {
  background: white;
  /* 白色表单背景 */
  padding: 30px;
  border-radius: 8px;
  /* 圆角边框 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* 轻微的投影 */
  width: 100%;
  max-width: 400px;
  /* 最大宽度限制 */
  margin: 0 auto;
}

.input-group {
  margin-bottom: 15px;
  /* 输入组间距 */
}

input {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border-radius: 4px;
  /* 输入框圆角 */
  border: 1px solid #ccc;
  /* 输入框边框 */
}

input.invalid {
  border-color: #dc3545;
  /* 红色边框 */
}

button.login-button {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #007bff;
  /* 蓝色背景 */
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

button.login-button:hover {
  background-color: #0056b3;
  /* 鼠标悬浮时的按钮颜色 */
}

button.login-button:disabled {
  background-color: #ccc;
  /* 禁用按钮的灰色背景 */
  cursor: not-allowed;
}
</style>